import { events } from "./events";

export function useMenuDragger(containerRef,data) {
    let currentComponent = null;
    // 拖拽开始 dragenter进入元素中  添加一个移动的标识
    const dragenter = (e) => {
      e.dataTransfer.dropEffect = "move"; //h5拖拽的图标
    };
    //dragover在目标元素经过 必须要阻止默认行为，否则不能触发drop事件
    const dragover = (e) => {
      e.preventDefault();
    };
    //dragleave离开元素时 需要添加一个禁用标识
    const dragleave = (e) => {
      e.dataTransfer.dropEffect = "none";
    };
    //drop放下元素时 根据拖拽的组件 添加一个组件
    const drop = (e) => {
      //先留在这
      console.log(currentComponent)
      let blocks=data.value.blocks //内部已经渲染的组件
      data.value = {...data.value,blocks:[
        ...blocks,
        {
            top:e.offsetY,
            left:e.offsetX,
            zIndex:1, 
            key:currentComponent.key,
            alignCenter:true, // 希望松手的时候你可以居中
            props:{},
            model:{}
        }
      ]}
      currentComponent = null
    };
    const dragstart = (e, component) => {
      //dragenter进入元素中，添加一个移动的标识
      //dragover 在目标元素经过  必须要阻止默认行为，否则不能触发drop
      //dragleave离开元素的时候 需要添加一个禁用标识
      //drop松手时候 根据拖住的组件 添加一个组件

      containerRef.value.addEventListener("dragenter", dragenter);
      containerRef.value.addEventListener("dragover", dragover);
      containerRef.value.addEventListener("dragleave", dragleave);
      containerRef.value.addEventListener("drop", drop);
      currentComponent = component;
      events.emit('start')//发布时间

    };
    const dragend = (e) => {
      containerRef.value.removeEventListener("dragenter", dragenter);
      containerRef.value.removeEventListener("dragover", dragover);
      containerRef.value.removeEventListener("dragleave", dragleave);
      containerRef.value.removeEventListener("drop", drop);
      events.emit('end')//发布时间
    }
    return {
        dragstart,
        dragend
    }
}
